<template>
<div class="order-detail">
    <div class="order-wrap h-fix-btn">
        <!-- 待支付 -->
        <div v-if="data.statusName == '待支付'" v-cloak class="m-pay floor">
            <h4 class="m-status">待支付</h4>
            <div class="m-cont">
                <p>请在<span class="g-time">{{ data.cancelLeftTime }}</span>内完成支付，超时后会自动取消。</p>
            </div>
        </div>
        <!-- 已退货 -->
        <div v-if="data.statusName == '已退货'" v-cloak class="m-pay floor">
            <h4 class="m-status">已退货</h4>
            <div class="m-cont">
                <p>交易取消啦，欢迎下次购买</p>
            </div>
        </div>
        <!-- 待配送、配送中 -->
        <div v-if="data.statusName == '待收货' || data.statusName == '配送中' || data.statusName == '待自提'" v-cloak class="m-delivery floor">
            <h4 class="m-status">
                {{ data.statusName }}
            </h4>
            <a :href="'/#/snOrderTrail/' + orderid">
                <div class="m-cont" v-if="data.expressTime || data.nearTrailInfo">
                    <p v-if="data.expressTime">预计送达时间为 <span class="g-time">{{data.expressTime}}</span></p>
                    <p class="g-track" v-if="data.nearTrailInfo">订单跟踪：{{ data.nearTrailInfo.serialDesc }}
                        <i class="c-back"></i>
                    </p>
                </div>
            </a>
        </div>
        <!-- 交易完成  -->
        <div v-if="data.statusName == '已完成'" v-cloak class="m-finish floor">
            <h4 class="m-status">已完成</h4>
            <a :href="'/#/snOrderTrail/' + orderid">
                <div class="m-cont">
                    <p>成交时间：{{ data.receiptTime }}</p>
                    <p class="g-track" v-if="data.nearTrailInfo">订单跟踪：{{ data.nearTrailInfo.serialDesc }}
                        <i class="c-back"></i>
                    </p>
                </div>
            </a>
        </div>
        <!-- 交易取消 -->
        <div v-if="data.statusName == '已取消'" v-cloak class="m-cancel floor">
            <h4 class="m-status">已取消</h4>
            <div class="m-cont">
                <p>交易取消啦，欢迎下次购买</p>
            </div>
            <a :href="'/#/snOrderTrail/' + orderid">
                <div class="m-cont" v-if="data.nearTrailInfo">
                    <p class="g-track" v-if="data.nearTrailInfo">订单跟踪：{{ data.nearTrailInfo.serialDesc }}
                        <i class="c-back"></i>
                    </p>
                </div>
            </a>
        </div>
        
        <!-- 退货状态：判断退货商品(returnItems)是否为空 -->
        <!-- <div v-show='data.returnItems.length > 0' v-cloak class="o-pro-status floor" v-cloak>
            <div v-if="data.refundStep == 00" class="o-status-mess">
                <h4 class="m-status">退款申请已提交</h4>
                <div class="m-statusTxt">
                    <p>退款金额：<span class="goods-price">&yen;{{ data.refundMoney }}</span> (预计1-15个工作日退至支付账户)</p>
                    <p>申请时间：{{ data.refundTime }}</p>
                </div>
            </div>

            <div v-else class="o-status-mess">
                <h4 class="m-status">退款已完成</h4>
                <div class="m-statusTxt">
                    <p>退款金额：<span class="goods-price">&yen;{{ data.refundMoney }}</span> (预计1-15个工作日退至支付账户)</p>
                    <p>退款时间：{{ data.refundFinishTime }}</p>
                    <p>申请时间：{{ data.refundTime }}</p>
                </div>
            </div>


            <div v-for="item in data.returnItems" class="m-cont o-list-con clearfix">
                <div class="o-index-pro-pic">
                    <img :src="item.imgSrc" :alt="item.commdtyName" @error.once="imgError">
                </div>
                <div class="o-pro-info">
                    <span class="o-pro-tit">{{ item.commdtyName }}</span>
                    <i v-if="item.returnQty == item.quantity" v-cloak class="o-pro-num">全部拒收</i>
                    <i v-else class="o-pro-num" v-cloak>已拒收<span>{{ item.returnQty }}</span>件</i>
                </div>
                <div class="qa-price clearfix">
                    <div class="price-text">
                        <span class="goods-price">&yen;{{ item.price }}</span>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- 送货地址（完成、待支付，配送中、取消） -->
        <div v-cloak class="delivery floor">
            <h4 class="m-title">
                <span class="order-ico deli-icon">送货地址</span>
            </h4>
            <div class="m-cont">
                <p>{{ data.receiverInfo.receiveName }}   {{ data.receiverInfo.receiveTel }}</p>
                <p>{{ data.receiverInfo.provinceName }}{{ data.receiverInfo.cityName }}{{ data.receiverInfo.districtName }}{{ data.receiverInfo.interestPointName }}{{ data.receiverInfo.detailAddress }}</p>
            </div>
        </div>
        <!-- 买家留言1待支付、2待配送、3配送中 -->
        <div v-if="data.remarkInfo" v-show='data.statusInfo == 1 || data.statusInfo == 2 || data.statusInfo == 3' v-cloak class="delivery floor">
            <h4 class="m-title">
                <span class="order-ico mess-ico">买家留言</span>
            </h4>
            <div v-cloak class="m-cont">
                <p v-if="data.remarkInfo">{{ data.remarkInfo }}</p>
                <p v-else>无</p>  
            </div>
        </div>

        <!-- 商品清单（完成、待支付，配送中） -->
        <div v-show='data.orderItems.length > 0' v-cloak class="delivery floor">
            <h4 class="m-title">
                <span class="order-ico defu-ico">{{data.storeName}}</span>
            </h4>

            <div v-for="item in data.orderItems" class="m-cont o-list-con clearfix" :class="{'item-wide': !item.verifyCode}">
                <a :href="`/#/detail/${item.commdtyCode}/${data.storeCode}`">
                    <div class="verify-code" v-if="item.verifyCode">校验码： {{ item.verifyCode }}</div>
                    <div class="o-index-pro-pic">
                        <img :src="item.commdtyCode | newImgUrl(item.imgFlag)" :alt="item.commdtyName" @error.once="imgError">
                        <span class="desc" v-if="item.itemStatus == '08' || item.itemStatus == '09' || item.itemStatus == '10'" v-text="returnStatus(item.itemStatus)"></span>
                    </div>
                    <div class="o-pro-info">
                        <span class="o-pro-tit">{{ item.commdtyName }}</span>
                    </div>
                    <div class="qa-price clearfix">
                        <div class="price-text">
                            <span class="goods-price">&yen; {{ item.price }}</span>
                            <i class="o-pro-num">x{{ item.quantity }}</i>
                        </div>
                    </div>
                </a>
            </div>

            <div class="m-cont o-pro-price">
                <ul>
                    <li><span class="p-teb-name">商品总额：</span><span class="p-teb-cont">&yen;{{ data.orderAmount }}</span></li>
                    <li><span class="p-teb-name">配送费：</span><span class="p-teb-cont">&yen;{{ data.shipChargeAmt}}</span></li>
                    <li v-if="parseFloat(data.promotionAmt)"><span class="p-teb-name">商品优惠：</span><span class="p-teb-cont">- &yen;{{ data.promotionAmt}}</span></li>
                    <li v-if="parseFloat(data.couponAmt)"><span class="p-teb-name">优惠券：</span><span class="p-teb-cont">-&yen;{{ data.couponAmt}}</span></li>
                    
                    <li v-show="data.payTypeDesc.length > 0"><span class="p-teb-name">支付方式：</span><span class="p-teb-cont">{{ data.payTypeDesc }}</span></li>
                    <li v-show="data.payAmt.length > 0"><span class="p-teb-name sfze">实付总额：</span><span class="p-teb-cont p-reds">&yen;{{ data.payAmt }}</span></li>

                </ul>
            </div>
        </div>
        <!-- 订单号（完成、待支付，配送中、取消） -->
        <div v-cloak class="delivery floor">
            <div class="m-cont o-order-mess">
                <ul>
                    <li><span class="p-teb-name">订单号：</span><span class="p-teb-cont">{{ orderid }}</span></li>
                    <li><span class="p-teb-name">发票信息：</span><span class="p-teb-cont">{{ invoiceName }} - {{ data.invoiceName }}</span></li>
                    <li><span class="p-teb-name">下单时间：</span><span class="p-teb-cont">{{ data.orderTime }}</span></li>
                    <li v-show="data.payTime && data.payTime.length > 0"><span class="p-teb-name">支付时间：</span><span class="p-teb-cont">{{ data.payTime }}</span></li>
                    <li v-show="data.expressTime && data.expressTime.length > 0">
                        <span class="p-teb-name">送达时间：</span>
                        <!-- <span v-if="data.status == '00' || data.status == '08'" class="p-teb-cont">{{ data.receiptTime }}</span> -->
                        <span class="p-teb-cont">预计{{ data.expressTime }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="btn-bottom" v-if="data.statusInfo != 1 && data.statusInfo <= 4">
        <div class="o-btn">
            <a v-if="data.canEditOrder == '1'" :href="data.editOrderUrl">修改订单</a>
            <a v-if="data.canCancel == '1'" href="javascript:;" @click="cancelOrder(data.payedCancelUrl)">取消订单</a>
            <a v-if="data.statusInfo == 2 || data.statusInfo == 4" class="btn-trail" :href="`/#/snOrderTrail/${orderid}`">订单跟踪</a>
            <a v-if="data.showReminder == 1" href="javascript:;" @click="reminder(data.wcOwnerTel)">催单</a>
            <a v-if="data.afterSalesFlag == '1'" :href="data.afterSalesUrl">申请售后</a>
            <a v-if="data.statusInfo == 0" class="go-pay" href="javascript:;"  @click="OFStoPay(orderid)">去支付</a>
        </div>
    </div>

</div>
</template>

<script>
import fetch from '../../config/fetch';
import * as domains from '../../config/env';
import * as Util from '../../config/utils';
import { statusInfoSn } from './statusInfo';
import { mapGetters, mapActions } from 'vuex'

export default {
    data () {
        return {
            orderid: this.$route.params.orderid,
            data: {
                receiverInfo: {},
                orderItems: [],
                returnItems: [],
                payTime: '',
                expressTime: '',
                payTypeDesc: '',
                payAmt: ''
            }
        }
    },
    mounted () {
        this.getOrderDetail();
    },
    computed: {
        invoiceName() {
            let map = {
                '00': '无发票',
                '01': '增值税发票',
                '02': '普通发票',
                '03': '纸质电子发票',
                '04': '电子发票',
                '05': '不开发票'
            };
            return map[this.data.invoiceType];
        }
    },
    methods: {
        ...mapActions([
			'OFStoPay'
		]),
        /* 取订单详情数据 */
        getOrderDetail() {
            let that = this;
            $.ajax({
                url: domains.shop + '/xd-order-web/cloud/order/showOrderDetail.do',
                data: {
                    b2cOrderId: this.orderid
                },
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'getOrderDetail',
                success: function(res){
                    if (res && res.data) {
                        let data = res.data;

                        //获取退货列表图片
                        // data.returnItems.length && $.each(data.returnItems, function(i, v){
                        //     v.imgSrc = that.getImgURL(v.imgFlag, v.commdtyCode);
                        // })
                        data.receiverInfo.receiveTel = Util.getTelReplace(data.receiverInfo.receiveTel);

                        data.refundMoney = parseFloat(data.refundMoney).toFixed(2);

                        // 修改数据模型
                        that.data = data;

                        $.each(statusInfoSn[data.isPickUp == '1' ? 'pickUp' : 'delivery'], function(si, sv){
                            if (sv.data.indexOf(data.status) >= 0) {
                                that.data.statusInfo = si;
                                that.data.statusName = sv.name;
                            };
                        });

                        that.countDown();
                    }
                    else {
                        AlertBox({type: "mini", msg: res.msg});
                    }
                },
                error: function() {
                    AlertBox({type: "mini", msg: "网络异常，请稍后再试"});
                }
            });
        },

        /* 取消订单 */
        cancelOrder(url) {
            let that = this;

            if (that.data.statusInfo != 0 && that.data.payedCancelUrl) {
                return location.href = url;
            }

            AlertBox({type:'doubleBtn',alertType:'fixed',title:'真的忍心不要我们了吗？',cancelText:'还是要吧',confirmText:'无情不要',confirm:function(){
				$.ajax({
				  	type: 'POST',
				  	url: domains.shop + '/xd-order-web/cloud/order/cancelOrder.do',
				  	data: {
                        app: 'wap',
                        b2cOrderId: that.orderid
                    },
				  	dataType: 'json',
					beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
					success: function(data){
						location.href = "/#/snOrderList";
					},
					error: function(xhr, type){
					    // AlertBox({type: "mini", msg: "网络异常，请稍后再试"});
                        location.href = "/#/snOrderList";
					}
				});
			}});
        },

        /* 催单 */
        reminder(tel) {
            AlertBox({
                type:'doubleBtn',
                alertType:'fixed',
                title:'已通知苏鲜生店尽快为您配送，请耐心等待一会儿~',
                confirmText: "我再等等",
                cancelText: "联系苏鲜生",
                cancel:function(){
                    location.href = "tel:"+tel;
                }
            })
        },

        /* 倒计时 */
        countDown() {
            if (!this.data.cancelLeftTime) {
                return;
            }

            let parts = this.data.cancelLeftTime.replace(/小时|分|秒/g, '-').split('-'),
                seconds = parseInt(parts[0]) * 60 * 60 + parseInt(parts[1]) * 60 + parseInt(parts[2]);

            setInterval(() => {
                if (!seconds) {
                    return;
                }
                seconds--;

                let h = parseInt(seconds / 60 / 60, 10);
                let m = parseInt(seconds / 60 % 60, 10);
                let s = parseInt(seconds % 60, 10);

                if (h < 10) h = '0' + h;
                if (m < 10) m = '0' + m;
                if (s < 10) s = '0' + s;

                this.data.cancelLeftTime = h + '小时' + m + '分' + s + '秒';
            }, 1000);
        },

        imgError(event) {
            event.target.src = '/static/images/pro-default.png';
        },

        returnStatus(code) {
            let str = '';

            switch(code) {
                case '08': str = '已退货'; break;
                case '09': str = '退款中'; break;
                case '10': str = '退款完成'; break;
            }

            return str;
        }
    },
    components: {

    }
}
</script>

<style lang="scss" scoped>
@import "./style";
</style>